<template>
  <div :class="['nes-field', inline==='true'||inline ?'is-inline':'']">
    <label v-if="label" :for="name" :style="labelStyle">{{ label }}</label>
    <input
      :id="name"
      :class="['nes-input' , type]"
      type="text"
      v-model="modelValueProxy"
      :style="inputStyle"
      :placeholder="placeholder"
      :disabled="disabled"
      :maxlength="maxlength"
    />
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  inline : { type: Boolean, default: true }, // 标签是否和输入框在同一行
  type : { type: String, default: '' }, // 输入框类型 success,warning, error
  label: { type: String, default: '' }, 
  name: { type: String, default: 'pixel-input' },
  width: { type: [String, Number], default: '100%' }, // 输入框宽度
  color: { type: String, default: '' }, // 字体颜色
  font: { type: String, default: ' Press Start 2P, zpix' }, // 像素风字体
  placeholder: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
  maxlength: { type: Number, default: null },
})

const emit = defineEmits(['update:modelValue'])
const modelValueProxy = ref(props.modelValue)
watch(() => props.modelValue, v => modelValueProxy.value = v)
watch(modelValueProxy, v => emit('update:modelValue', v))



const inputStyle = computed(() => {
  const style = {}
  style.fontFamily = props.font
  style.width = typeof props.width === 'number' ? props.width + 'px' : props.width
  if (props.color) style.color = props.color
  return style
})

const type = computed(()=>{
  return props.type!=""? "is-"+props.type:""
})


</script>

<style scoped>
</style> 